<template>
  <div class="wrap pageBox" v-show="pageItem.meta.to">
        <el-pagination
            :page-size="pageItem.meta.per_page"
            :current-page="pageItem.meta.current_page"
            layout="prev, pager, next"
            :total="pageItem.meta.total"
            @current-change="pageShow"
        >
        </el-pagination>
    </div>
</template>

<script>

export default {
    name : "page",
    props:['pageItem'],
    data () {
        return {
            current:1,
            total:10
        }
    },
    methods : {
        pageShow(value){
            this.$emit('pageChange',value);
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
        }
    },
    created () {
        if(this.$route.query.page&&this.$route.query.page!='0'){
            this.pageShow(this.$route.query.page)
        }
    }
}
</script>
<style>
.pageBox{
    text-align: center;
    margin-bottom: 42px;
}
.el-pager li{
    width: 38px!important;
    height: 38px!important;
    line-height: 38px!important;
    margin: 0 4px!important;
    color: #363636!important;
    border-radius: 3px!important;
}
.el-pagination .btn-next, .el-pagination .btn-prev{
    height: 38px;
    margin: 0 4px;
    color: #a0a6a2!important;
     border-radius: 3px;
}
.el-pager .more::before{
    line-height: 38px;
}
.el-pager li.active{
    background: #ea514b;
    color: #fff!important;
}
.el-pager li:hover{
    background: #ea514b;
    color: #fff!important;

}
</style>
